<template>
  <el-container class="teacher-root">
    <!-- 顶部导航栏 -->
    <el-header class="teacher-header" height="64px">
      <div class="header-left">
        <div class="header-logo">
          <el-icon class="logo-icon"><School /></el-icon>
          <span class="header-title">勤工助学系统</span>
        </div>
        <el-breadcrumb separator="/" class="breadcrumb">
          <el-breadcrumb-item :to="{ path: '/teacher' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item v-if="currentPage">{{ currentPage }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="header-right">
        <el-dropdown @command="handleAvatarCommand" trigger="click">
          <div class="user-info">
            <el-avatar :src="userStore.user?.avatar || '/avatar.png'" class="user-avatar" />
            <span class="user-name">老师</span>
            <el-icon><ArrowDown /></el-icon>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="profile">
                <el-icon><User /></el-icon>
                个人信息
              </el-dropdown-item>
              <el-dropdown-item divided command="logout">
                <el-icon><SwitchButton /></el-icon>
                退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>

    <el-container class="teacher-layout">
      <!-- 侧边栏导航 -->
      <el-aside class="teacher-aside" width="240px">
        <el-menu
          class="teacher-menu"
          :default-active="activeNav"
          @select="onNavChange"
          router
          background-color="#fff"
          text-color="#606266"
          active-text-color="#409EFF"
        >
          <el-menu-item index="/teacher/post" class="menu-item">
            <el-icon><Edit /></el-icon>
            <span>发布岗位</span>
          </el-menu-item>
          <el-menu-item index="/teacher/position-manage" class="menu-item">
            <el-icon><Briefcase /></el-icon>
            <span>岗位管理</span>
          </el-menu-item>
          <el-menu-item index="/teacher/approve" class="menu-item">
            <el-icon><Check /></el-icon>
            <span>审批学生申请</span>
          </el-menu-item>
          <el-menu-item index="/teacher/attendance" class="menu-item">
            <el-icon><Clock /></el-icon>
            <span>工时审核</span>
          </el-menu-item>
          <el-menu-item index="/teacher/salary" class="menu-item">
            <el-icon><Money /></el-icon>
            <span>工资发放</span>
          </el-menu-item>
          <el-menu-item index="/teacher/stat" class="menu-item">
            <el-icon><DataAnalysis /></el-icon>
            <span>数据统计</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <!-- 主内容区域 -->
      <el-main class="teacher-content">
        <!-- Dashboard内容 - 仅在首页显示 -->
        <div v-if="isHomePage" class="dashboard-section">
          <div class="welcome-section">
            <h1>欢迎回来，老师！</h1>
            <p class="welcome-text">今天是 {{ currentDate }}，祝您工作顺利！</p>
          </div>

          <div class="stats-section">
            <el-row :gutter="20">
              <el-col :span="6">
                <el-card class="stat-card" shadow="never">
                  <div class="stat-content">
                    <div class="stat-icon active">
                      <el-icon><Briefcase /></el-icon>
                    </div>
                    <div class="stat-info">
                      <div class="stat-number">{{ stats.activePositions }}</div>
                      <div class="stat-label">活跃岗位</div>
                    </div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card class="stat-card" shadow="never">
                  <div class="stat-content">
                    <div class="stat-icon pending">
                      <el-icon><Document /></el-icon>
                    </div>
                    <div class="stat-info">
                      <div class="stat-number">{{ stats.pendingApplications }}</div>
                      <div class="stat-label">待审批申请</div>
                    </div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card class="stat-card" shadow="never">
                  <div class="stat-content">
                    <div class="stat-icon success">
                      <el-icon><User /></el-icon>
                    </div>
                    <div class="stat-info">
                      <div class="stat-number">{{ stats.activeStudents }}</div>
                      <div class="stat-label">在岗学生</div>
                    </div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card class="stat-card" shadow="never">
                  <div class="stat-content">
                    <div class="stat-icon warning">
                      <el-icon><Clock /></el-icon>
                    </div>
                    <div class="stat-info">
                      <div class="stat-number">{{ formatWorkHours(stats.totalHours) }}</div>
                      <div class="stat-label">本月工时</div>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </div>

        <!-- 快捷操作卡片 -->
        <div v-if="isHomePage" class="quick-actions">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-card class="quick-card" shadow="hover" @click="navigateTo('/teacher/post')">
                <div class="card-content">
                  <el-icon class="card-icon"><Edit /></el-icon>
                  <div class="card-text">
                    <h3>发布岗位</h3>
                    <p>创建新的勤工助学岗位</p>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card class="quick-card" shadow="hover" @click="navigateTo('/teacher/approve')">
                <div class="card-content">
                  <el-icon class="card-icon"><Check /></el-icon>
                  <div class="card-text">
                    <h3>审批申请</h3>
                    <p>审核学生岗位申请</p>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card class="quick-card" shadow="hover" @click="navigateTo('/teacher/attendance')">
                <div class="card-content">
                  <el-icon class="card-icon"><Clock /></el-icon>
                  <div class="card-text">
                    <h3>工时审核</h3>
                    <p>审核学生工时记录</p>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card class="quick-card" shadow="hover" @click="navigateTo('/teacher/stat')">
                <div class="card-content">
                  <el-icon class="card-icon"><DataAnalysis /></el-icon>
                  <div class="card-text">
                    <h3>数据统计</h3>
                    <p>查看岗位和申请统计</p>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>

        <!-- 路由视图 -->
        <div v-if="!isHomePage" class="content-wrapper">
          <router-view />
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { ref, watch, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { 
  School, ArrowDown, User, SwitchButton, 
  Edit, Check, Clock, Money, DataAnalysis, Briefcase, Document 
} from '@element-plus/icons-vue'
import { getTeacherDashboardStats } from '@/api/teacher.js'
import { ElMessage } from 'element-plus'

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()

const activeNav = ref(route.path)

// 页面标题映射
const pageTitles = {
  '/teacher/post': '发布岗位',
  '/teacher/approve': '审批学生申请',
  '/teacher/attendance': '工时审核',
  '/teacher/salary': '工资发放',
  '/teacher/stat': '数据统计'
}

const currentPage = computed(() => pageTitles[route.path])
const isHomePage = computed(() => route.path === '/teacher' || route.path === '/teacher/')

// 当前日期
const currentDate = computed(() => {
  const now = new Date()
  return now.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long'
  })
})

// 统计数据
const stats = ref({
  activePositions: 0,
  pendingApplications: 0,
  activeStudents: 0,
  totalHours: 0
})

// 获取Dashboard统计数据
async function fetchDashboardStats() {
  try {
    const response = await getTeacherDashboardStats()
    if (response.code === 0) {
      stats.value = response.data
    }
  } catch (error) {
    console.error('获取Dashboard统计数据失败:', error)
  }
}

watch(() => route.path, (val) => {
  activeNav.value = val
})

function onNavChange(path) {
  if (path !== route.path) {
    router.push(path)
  }
}

// 处理头像下拉菜单点击
const handleAvatarCommand = (command) => {
  switch (command) {
    case 'profile':
      router.push('/teacher/profile')
      break
    case 'logout':
      userStore.logout()
      router.push('/login')
      ElMessage.success('退出登录成功')
      break
  }
}

function navigateTo(path) {
  router.push(path)
}

// 格式化工时显示
function formatWorkHours(hours) {
  if (hours === null || hours === undefined) return '0.0'
  return Number(hours).toFixed(1)
}

// 页面加载时获取统计数据
onMounted(() => {
  if (isHomePage.value) {
    fetchDashboardStats()
  }
})
</script>

<style scoped>
.teacher-root {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  background: #f5f7fa;
}

/* 顶部导航栏样式 - 深色主题 */
.teacher-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  background: #1a237e;  /* 深靛蓝色 */
  color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 24px;
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.logo-icon {
  font-size: 24px;
  color: #fff;
}

.header-title {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}

.breadcrumb {
  color: rgba(255, 255, 255, 0.8);
}

.breadcrumb :deep(.el-breadcrumb__item) {
  color: rgba(255, 255, 255, 0.8);
}

.breadcrumb :deep(.el-breadcrumb__inner) {
  color: rgba(255, 255, 255, 0.8) !important;  /* 面包屑导航文字颜色 */
}

.breadcrumb :deep(.el-breadcrumb__separator) {
  color: rgba(255, 255, 255, 0.5) !important;  /* 面包屑分隔符颜色 */
}

.header-right {
  display: flex;
  align-items: center;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.user-info:hover {
  background: rgba(255, 255, 255, 0.1);
}

.user-avatar {
  width: 32px;
  height: 32px;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.user-name {
  font-size: 14px;
  color: #ffffff;  /* 更改用户名文字颜色为纯白色 */
  font-weight: 500;
}

/* 布局样式 */
.teacher-layout {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.teacher-aside {
  background: #fff;
  box-shadow: 2px 0 8px 0 rgba(0,0,0,0.06);
  border-right: 1px solid #e4e7ed;
}

.teacher-menu {
  border-right: none;
  padding: 16px 0;
}

.menu-item {
  margin: 4px 16px;
  border-radius: 8px;
  height: 48px;
  line-height: 48px;
  transition: all 0.3s;
}

.menu-item:hover {
  background: #f0f9ff;
  color: #409EFF;
}

.menu-item.is-active {
  background: #e6f7ff;
  color: #409EFF;
  font-weight: 500;
}

.menu-item .el-icon {
  margin-right: 12px;
  font-size: 16px;
}

/* 主内容区域 */
.teacher-content {
  background: #f5f7fa;
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

/* Dashboard样式 */
.dashboard-section {
  margin-bottom: 32px;
}

.welcome-section {
  margin-bottom: 32px;
  text-align: center;
}

.welcome-section h1 {
  font-size: 28px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 8px 0;
}

.welcome-text {
  font-size: 16px;
  color: #909399;
  margin: 0;
}

.stats-section {
  margin-bottom: 32px;
}

.stat-card {
  border: none;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.04);
}

.stat-content {
  display: flex;
  align-items: center;
  padding: 20px;
  gap: 16px;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #fff;
}

.stat-icon.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-icon.pending {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.stat-icon.success {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.stat-icon.warning {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.stat-info {
  flex: 1;
}

.stat-number {
  font-size: 28px;
  font-weight: 700;
  color: #303133;
  line-height: 1;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #909399;
  font-weight: 500;
}

/* 快捷操作卡片 */
.quick-actions {
  margin-bottom: 24px;
}

.quick-card {
  cursor: pointer;
  transition: all 0.3s;
  border: none;
  border-radius: 12px;
  overflow: hidden;
}

.quick-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.card-content {
  display: flex;
  align-items: center;
  padding: 20px;
  gap: 16px;
}

.card-icon {
  font-size: 32px;
  color: #409EFF;
  background: #e6f7ff;
  padding: 12px;
  border-radius: 12px;
}

.card-text h3 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.card-text p {
  margin: 0;
  font-size: 12px;
  color: #909399;
  line-height: 1.4;
}

.content-wrapper {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.04);
  min-height: calc(100vh - 300px);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .teacher-aside {
    width: 200px !important;
  }
  
  .header-left {
    gap: 16px;
  }
  
  .breadcrumb {
    display: none;
  }
  
  .stats-section .el-col,
  .quick-actions .el-col {
    margin-bottom: 16px;
  }
  
  .welcome-section h1 {
    font-size: 24px;
  }
  
  .stat-number {
    font-size: 24px;
  }
}

/* 深度样式覆盖 */
:deep(.el-container) {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

:deep(.el-header) {
  padding: 0;
  height: 64px !important;
}

:deep(.el-main) {
  padding: 24px;
}

:deep(.el-menu) {
  border-right: none;
}

:deep(.el-dropdown-menu__item) {
  display: flex;
  align-items: center;
  gap: 8px;
}

:deep(.el-dropdown-menu__item .el-icon) {
  margin-right: 0;
}
</style> 
